define(['text!service/charges.html'],
    function(viewTemplate) {
        return Piece.View.extend({
            id: 'service_charges',
            events: {
                "click #st_left": "st_left",
                "click #st_right": "st_right"

            },
            render: function() {
                $(this.el).html(viewTemplate);

                Piece.View.prototype.render.call(this);
                return this;
            },
            onShow: function() {
                //write your business logic here :)


                var windowHeight = $(window).height();
                var elTop = $("#charges").offset().top;
                var elHeight = windowHeight - elTop - 35;

                console.info(elHeight);
                $("#charges").css({
                    "height": elHeight
                });
                new iScroll($("#charges")[0]);

                
            },
            st_left: function() {
                $("#stander2").hide();
                $("#stander1").show();
                $("#st_right").removeClass("st2");
                $("#st_left").addClass("st2");
            },
            st_right:function(){
                $("#stander1").hide();
                $("#stander2").show();
                $("#st_left").removeClass("st2");
                $("#st_right").addClass("st2");
            }
        }); //view define

    });